/*
 公共mixin scss文件
*/

@mixin txU($txU:Uppercase) {
  text-transform: $txU;
}
@mixin tc($txU:Uppercase) {
  text-align: center;
}
@mixin pr($txU:Uppercase) {
  position: relative;
}

/*************************** 默认的表单设置 ************************************/
@mixin xh-form($h:40px,$b:#fff,$border:1px solid #e6e6e6,$size:16px,$radius:2px,$p:$h/4){
  .xh-inline{ display: inline-block;} 
  .xh-input,.xh-textarea,select{ font-size: $size;font-family: "Microsoft Yahei";border-radius:$radius;  background: $b;border:$border;}
  .xh-input,select{  line-height: $h; height: $h; width: 100%; padding:0px $p; }
  .xh-input{
    &.xh-form-danger{ border-color: $base; }
    &:focus{ border-color: $base; }
  }
  .xh-textarea{ line-height: $h; height: $h*4;padding:$p;  width: 100%; }
  .xh-btn{ border:none; background: $base; color: #fff; line-height: $h; height: $h; padding: 0px $p; 
    cursor:pointer;  border-radius:$radius;  transform: all .5s;
    &:hover{ background: darken($base,5%); }
    &.border{
      border:$border; background:none; color: $color;
    }
   }
   select{&:focus{ border-color: $base; }}
  .xh-bd-flex{ margin-bottom: 12px;display: flex;
    align-items: center;
  .xh-bd-item{flex:1;
    &:nth-child(n+2){
      margin-left: 13px;
    }
  }
  .xh-bd-icon{ width: 13px;}
  .xh-bd-lable{ width: 80px; line-height: $h; height: $h; }
 }
}

@mixin fr($txU:Uppercase) {
  float: right;
}
@mixin scrollBar($bg: #d3dce6, $active: #99a9bf, $w: 4px, $h: 4px,$radius:20px) {
  &::-webkit-scrollbar-track-piece {
    background: $bg;
  }
  &::-webkit-scrollbar {
    width: $w;
    height: $h;
  }
  &::-webkit-scrollbar-thumb {
    background: $active;
    border-radius: $radius;
  }
}
//字母全大写
@mixin txC($txC:Capitalize) {
  text-transform: $txC;
}
// 创建一个方方正正的圆形，一般用于图标的圆边，自己添加border
@mixin size($size){
   width: $size;
   height: $size;
   line-height: $size;
   text-align: center;
   border-radius: 50%;
}


//$size为一行几个，$w为li宽度，$wd为内容框宽度
@mixin li($name,$w:390px,$size:3,$wd:1200){
  .#{$name}{
    $r: ($wd - ($w * $size)) / ($size - 1); 
    margin-right: -$r; @include after;
    li{ width: $w; margin-right:$r; float: left;  margin-bottom: $r;  }
    }
}
//$size为一行几个，$w为li宽度，$wd为内容框宽度
@mixin lis($name,$w:32%,$size:3){
  .#{$name}{
    $r: (100% - ($w * $size)) / ($size - 1); 
    li{ width: $w; margin-right:$r; float: left;  margin-bottom: $r;  
         &:nth-child(#{$size}n){
          margin-right: 0px;
         }
    }
    }
}


// 全局通用的一些mixin方法


@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin zihang($h:1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $h;
  -webkit-box-orient: vertical;
}


@mixin dis-in($in:inline) {
  _display: $in;
  zoom: 1;
  display: inline-block;
  vertical-align: middle;
}

@mixin after() {
  &:after {
    content: "";
    display: block;
    width: 100%;
    overflow: hidden;
    clear: both;
  }
}
